<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI - Checkboxes</title>
	<link rel="stylesheet" href="../../../themes/base/all.css">
	<script src="../../../external/jquery/jquery.js"></script>
	<script src="../../../ui/core.js"></script>
	<script src="../../../ui/widget.js"></script>
	<script src="../../../ui/button.js"></script>
	<script src="../../../ui/checkboxradio.js"></script>
	<script>
	$(function() {
		var checkboxes = $( "form input" ).checkboxradio();

		$( ".controls input, .controls select" ).on( "change keyup", function() {
			var option = $( this ).attr( "name" ),
				value = $( this ).val();

			if ( $( this ).is( "[type=checkbox]" ) ) {
				value = $( this ).is( ":checked" );
			}
			if ( option != "label" || value !== "" ) {
				checkboxes.checkboxradio( "option", option, value );
			}
		});
		$( ".controls > button" ).click( function() {
			if ( this.id !== "create" ) {
				checkboxes.checkboxradio( this.id );
			} else {
				checkboxes.checkboxradio();
			}
		});
	});
	</script>
	<style>
	#format { margin-top: 2em; }
	</style>
</head>
<body>
<h2>
	Easy way to toggle through various combinations of options and states to make sure none lead to
	a broken appearence.
</h2>
<div class="controls">
	<button id="create">Create</button>
	<button id="destroy">Destroy</button>
	<button id="enable">Enable</button>
	<button id="disable">Disable</button>
	<button id="refresh">Refresh</button>
	<input type="checkbox" id="icon" name="icon" checked><label for="icon">Icon</label>
	<input type="checkbox" id="disabled" name="disabled"><label for="disabled">Disabled</label>
	<label for="label">Label<input type="text" id="label" name="label"></label>
</div>
<form>
	<input type="checkbox" id="checkbox-1">
	<label for="checkbox-1">Checkbox widget sample</label>
	<input type="checkbox" id="checkbox-2"><label for="checkbox-2">Checkbox widget sample</label>

	<label for="radio-1">Radio widget sample <input type="radio" id="radio-1" name="radio" checked></label>
	<input type="radio" id="radio-2" name="radio"><label for="radio-2"><span>boom</span>Radio widget sample 2</label>
	<button type="reset">Reset</button>
</form>
</body>
</html>
